<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="24">
          <el-form-item label="8.1血糖" prop="field101">
            <el-radio-group v-model="formData.field101" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="122px" label="检查时间：" prop="field102">
            <el-date-picker v-model="formData.field102" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '100%'}" placeholder="请选择检查时间：" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="空腹血糖" prop="field103">
            <el-input v-model="formData.field103" placeholder="mmol/L" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="122px" label="检查时间：" prop="field104">
            <el-date-picker v-model="formData.field104" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '100%'}" placeholder="请选择检查时间：" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="171px" label="餐后2小时血糖(推荐)" prop="field105">
            <el-input v-model="formData.field105" placeholder="mmol/L" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="122px" label="检查时间：" prop="field106">
            <el-date-picker v-model="formData.field106" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '100%'}" placeholder="请选择检查时间：" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="128px" label="糖化血红蛋白" prop="field107">
            <el-input v-model="formData.field107" placeholder="%" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="8.2血脂" prop="field108">
            <el-radio-group v-model="formData.field108" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="122px" label="检查时间：" prop="field109">
            <el-date-picker v-model="formData.field109" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '100%'}" placeholder="请选择检查时间：" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="120px" label="甘油三脂：" prop="field110">
            <el-input v-model="formData.field110" placeholder="mmol/L" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="111px" label="胆固醇：" prop="field111">
            <el-input v-model="formData.field111" placeholder="mmol/L胆固醇：" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="191px" label="低密度脂蛋白胆固醇：" prop="field112">
            <el-input v-model="formData.field112" placeholder="mmol/L" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="191px" label="高密度脂蛋白胆固醇：" prop="field114">
            <el-input v-model="formData.field114" placeholder="mmol/L" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="154px" label="8.3同型半胱氨酸" prop="field115">
            <el-radio-group v-model="formData.field115" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="122px" label="检查时间：" prop="field117">
            <el-date-picker v-model="formData.field117" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '100%'}" placeholder="请选择检查时间：" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="151px" label="同型半胱氨酸：" prop="field119">
            <el-input v-model="formData.field119" placeholder="mmol/L" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="64px" label="1" prop="field121">
            <el-radio-group v-model="formData.field121" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="高血压：" prop="field123">
            <el-radio-group v-model="formData.field123" size="medium">
              <el-radio v-for="(item, index) in field123Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="64px" label="2" prop="field124">
            <el-radio-group v-model="formData.field124" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label-width="112px" label="血脂异常：" prop="field125">
            <el-radio-group v-model="formData.field125" size="medium">
              <el-radio v-for="(item, index) in field125Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="64px" label="3" prop="field126">
            <el-radio-group v-model="formData.field126" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="糖尿病：" prop="field127">
            <el-radio-group v-model="formData.field127" size="medium">
              <el-radio v-for="(item, index) in field127Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="64px" label="4" prop="field128">
            <el-radio-group v-model="formData.field128" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label-width="184px" label="房颤或瓣膜性心脏病：" prop="field129">
            <el-radio-group v-model="formData.field129" size="medium">
              <el-radio v-for="(item, index) in field129Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="64px" label="5" prop="field130">
            <el-radio-group v-model="formData.field130" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label-width="101px" label="吸烟史：" prop="field131">
            <el-radio-group v-model="formData.field131" size="medium">
              <el-radio v-for="(item, index) in field131Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="64px" label="6" prop="field132">
            <el-radio-group v-model="formData.field132" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label-width="156px" label="明显超重或肥胖：" prop="field133">
            <el-radio-group v-model="formData.field133" size="medium">
              <el-radio v-for="(item, index) in field133Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="64px" label="7" prop="field136">
            <el-radio-group v-model="formData.field136" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label-width="119px" label="运动缺乏：" prop="field137">
            <el-radio-group v-model="formData.field137" size="medium">
              <el-radio v-for="(item, index) in field137Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="64px" label="8" prop="field138">
            <el-radio-group v-model="formData.field138" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label-width="146px" label="脑卒中家族史：" prop="field139">
            <el-radio-group v-model="formData.field139" size="medium">
              <el-radio v-for="(item, index) in field139Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="64px" label="|" prop="field140">
            <el-radio-group v-model="formData.field140" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label-width="134px" label="既往脑卒中：" prop="field141">
            <el-radio-group v-model="formData.field141" size="medium">
              <el-radio v-for="(item, index) in field141Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="64px" label="||" prop="field142">
            <el-radio-group v-model="formData.field142" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label-width="204px" label="既往短暂性脑缺血发作：" prop="field143">
            <el-radio-group v-model="formData.field143" size="medium">
              <el-radio v-for="(item, index) in field143Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="113px" label="风险评级" prop="field144">
            <el-radio-group v-model="formData.field144" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="-9px" label="" prop="field150">
            <el-radio-group v-model="formData.field150" size="medium">
              <el-radio v-for="(item, index) in field150Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="-9px" label="" prop="field151">
            <el-radio-group v-model="formData.field151" size="medium">
              <el-radio v-for="(item, index) in field151Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="-9px" label="" prop="field152">
            <el-radio-group v-model="formData.field152" size="medium">
              <el-radio v-for="(item, index) in field152Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="-9px" label="" prop="field153">
            <el-radio-group v-model="formData.field153" size="medium">
              <el-radio v-for="(item, index) in field153Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="-9px" label="" prop="field154">
            <el-radio-group v-model="formData.field154" size="medium">
              <el-radio v-for="(item, index) in field154Options" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label-width="141px" label="危险标识评级" prop="field155">
            <el-radio-group v-model="formData.field155" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="115px" label="管理分级" prop="field156">
            <el-radio-group v-model="formData.field156" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="115px" label="强化管理" prop="field157">
            <el-radio-group v-model="formData.field157" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="115px" label="规范化管理" prop="field158">
            <el-radio-group v-model="formData.field158" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="115px" label="健康管理" prop="field159">
            <el-radio-group v-model="formData.field159" size="medium"></el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        field101: undefined,
        field102: null,
        field103: undefined,
        field104: null,
        field105: undefined,
        field106: null,
        field107: undefined,
        field108: undefined,
        field109: null,
        field110: undefined,
        field111: undefined,
        field112: undefined,
        field114: undefined,
        field115: undefined,
        field117: null,
        field119: undefined,
        field121: undefined,
        field123: undefined,
        field124: undefined,
        field125: undefined,
        field126: undefined,
        field127: undefined,
        field128: undefined,
        field129: undefined,
        field130: undefined,
        field131: undefined,
        field132: undefined,
        field133: undefined,
        field136: undefined,
        field137: undefined,
        field138: undefined,
        field139: undefined,
        field140: undefined,
        field141: undefined,
        field142: undefined,
        field143: undefined,
        field144: undefined,
        field150: undefined,
        field151: undefined,
        field152: undefined,
        field153: undefined,
        field154: undefined,
        field155: undefined,
        field156: undefined,
        field157: undefined,
        field158: undefined,
        field159: undefined,
      },
      rules: {
        field101: [{
          required: true,
          message: '8.1血糖不能为空',
          trigger: 'change'
        }],
        field102: [{
          required: true,
          message: '请选择检查时间：',
          trigger: 'change'
        }],
        field103: [{
          required: true,
          message: 'mmol/L',
          trigger: 'blur'
        }],
        field104: [{
          required: true,
          message: '请选择检查时间：',
          trigger: 'change'
        }],
        field105: [{
          required: true,
          message: 'mmol/L',
          trigger: 'blur'
        }],
        field106: [{
          required: true,
          message: '请选择检查时间：',
          trigger: 'change'
        }],
        field107: [{
          required: true,
          message: '%',
          trigger: 'blur'
        }],
        field108: [{
          required: true,
          message: '8.2血脂不能为空',
          trigger: 'change'
        }],
        field109: [{
          required: true,
          message: '请选择检查时间：',
          trigger: 'change'
        }],
        field110: [{
          required: true,
          message: 'mmol/L',
          trigger: 'blur'
        }],
        field111: [{
          required: true,
          message: 'mmol/L胆固醇：',
          trigger: 'blur'
        }],
        field112: [{
          required: true,
          message: 'mmol/L',
          trigger: 'blur'
        }],
        field114: [{
          required: true,
          message: 'mmol/L',
          trigger: 'blur'
        }],
        field115: [{
          required: true,
          message: '8.3同型半胱氨酸不能为空',
          trigger: 'change'
        }],
        field117: [{
          required: true,
          message: '请选择检查时间：',
          trigger: 'change'
        }],
        field119: [{
          required: true,
          message: 'mmol/L',
          trigger: 'blur'
        }],
        field121: [{
          required: true,
          message: '1不能为空',
          trigger: 'change'
        }],
        field123: [{
          required: true,
          message: '高血压：不能为空',
          trigger: 'change'
        }],
        field124: [{
          required: true,
          message: '2不能为空',
          trigger: 'change'
        }],
        field125: [{
          required: true,
          message: '血脂异常：不能为空',
          trigger: 'change'
        }],
        field126: [{
          required: true,
          message: '3不能为空',
          trigger: 'change'
        }],
        field127: [{
          required: true,
          message: '糖尿病：不能为空',
          trigger: 'change'
        }],
        field128: [{
          required: true,
          message: '4不能为空',
          trigger: 'change'
        }],
        field129: [{
          required: true,
          message: '房颤或瓣膜性心脏病：不能为空',
          trigger: 'change'
        }],
        field130: [{
          required: true,
          message: '5不能为空',
          trigger: 'change'
        }],
        field131: [{
          required: true,
          message: '吸烟史：不能为空',
          trigger: 'change'
        }],
        field132: [{
          required: true,
          message: '6不能为空',
          trigger: 'change'
        }],
        field133: [{
          required: true,
          message: '明显超重或肥胖：不能为空',
          trigger: 'change'
        }],
        field136: [{
          required: true,
          message: '7不能为空',
          trigger: 'change'
        }],
        field137: [{
          required: true,
          message: '运动缺乏：不能为空',
          trigger: 'change'
        }],
        field138: [{
          required: true,
          message: '8不能为空',
          trigger: 'change'
        }],
        field139: [{
          required: true,
          message: '脑卒中家族史：不能为空',
          trigger: 'change'
        }],
        field140: [{
          required: true,
          message: '|不能为空',
          trigger: 'change'
        }],
        field141: [{
          required: true,
          message: '既往脑卒中：不能为空',
          trigger: 'change'
        }],
        field142: [{
          required: true,
          message: '||不能为空',
          trigger: 'change'
        }],
        field143: [{
          required: true,
          message: '既往短暂性脑缺血发作：不能为空',
          trigger: 'change'
        }],
        field144: [{
          required: true,
          message: '风险评级不能为空',
          trigger: 'change'
        }],
        field150: [{
          required: true,
          message: '不能为空',
          trigger: 'change'
        }],
        field151: [{
          required: true,
          message: '不能为空',
          trigger: 'change'
        }],
        field152: [{
          required: true,
          message: '不能为空',
          trigger: 'change'
        }],
        field153: [{
          required: true,
          message: '不能为空',
          trigger: 'change'
        }],
        field154: [{
          required: true,
          message: '不能为空',
          trigger: 'change'
        }],
        field155: [{
          required: true,
          message: '危险标识评级不能为空',
          trigger: 'change'
        }],
        field156: [{
          required: true,
          message: '管理分级不能为空',
          trigger: 'change'
        }],
        field157: [{
          required: true,
          message: '强化管理不能为空',
          trigger: 'change'
        }],
        field158: [{
          required: true,
          message: '规范化管理不能为空',
          trigger: 'change'
        }],
        field159: [{
          required: true,
          message: '健康管理不能为空',
          trigger: 'change'
        }],
      },
      field123Options: [{
        "label": "有",
        "value": 1
      }, {
        "label": "无",
        "value": ""
      }],
      field125Options: [{
        "label": "有",
        "value": 1
      }, {
        "label": "无",
        "value": ""
      }],
      field127Options: [{
        "label": "有",
        "value": 1
      }, {
        "label": "无",
        "value": ""
      }],
      field129Options: [{
        "label": "有",
        "value": 1
      }, {
        "label": "无",
        "value": ""
      }],
      field131Options: [{
        "label": "有",
        "value": 1
      }, {
        "label": "无",
        "value": ""
      }],
      field133Options: [{
        "label": "有",
        "value": 1
      }, {
        "label": "无",
        "value": ""
      }],
      field137Options: [{
        "label": "有",
        "value": 1
      }, {
        "label": "无",
        "value": ""
      }],
      field139Options: [{
        "label": "有",
        "value": 1
      }, {
        "label": "无",
        "value": ""
      }],
      field141Options: [{
        "label": "有",
        "value": 1
      }, {
        "label": "无",
        "value": ""
      }],
      field143Options: [{
        "label": "有",
        "value": 1
      }, {
        "label": "无",
        "value": ""
      }],
      field150Options: [{
        "label": "脑卒中",
        "value": 1
      }],
      field151Options: [{
        "label": "TIA",
        "value": 1
      }],
      field152Options: [{
        "label": "n>=3高危",
        "value": 1
      }],
      field153Options: [{
        "label": "中危",
        "value": 1
      }],
      field154Options: [{
        "label": "低危",
        "value": 1
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
